/* eslint-disable */
import React from 'react'
import { Card, message } from 'antd'
import { queryMessageList,MessageRead } from '@/api/message'
import Store from '../../../store/index'
import './index.scss'

class Index extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      systemMessageList: [{}], // 系统消息列表
      commentMessageList:[],
      readText:'标记已读',

    }
  }
  componentDidMount(){
    
  }
  opreateRead = async (item,type,name,index)=>{ //已读 或者 全读
    if(!item.isRead || type=='all'){
      const res = await MessageRead({
      type,
      messageId:item.id
    })
    if(res.code == 200){
      Store.queryMessage() //查询现在的未读消息
      console.log(this)
      this.props.parent.refreshMessage()
    
    }
  }
    
  }
  render() {
    return (
      <div>
        {
          (() => {
            switch (this.props.messageType) {
              case 'system':
                return <div>
                  {this.props.systemMessageList.length ? this.props.systemMessageList.map((item, index) => {
                    return <Card style={{ width: '100% ' }} key={index}>
                      <div className='message-box'>
                        <div className='avatar'>
                          <img src={require('../../../assets/images/1.jpg').default} alt="" />
                        </div>
                        <div className='message-item-right'>
                          <div className='message-item-head'>
                            {/* <span>霸道</span>  <span>回复了你在文章</span> */}
                            {/* <a href="">Vue、Node全栈项目~面向小白的博客系统~ </a> */}
                            {/* <span>下的评论</span> */}
                          </div>
                          <div className='message-item-content'>
                          {item.content}
                          </div>
                          <div className='message-item-time'>
                            <div>
                              <span>
                                {item.createTime}
                              </span>
                            </div>
                            
                            <div className='opreate-read'>
                                  <span className={item.isRead == 0 ?'one-read unread' : 'one-read'} onClick={()=>this.opreateRead(item,'one','comment',index)}>
                                  {item.isRead == 0 ? '标记已读' : '已读'}
                                </span>
                                <span className={Store.unReadMessageCount ? 'all-read unread' : 'all-read'} onClick={()=>this.opreateRead(item,'all','comment',index)}>
                                  全部已读
                                </span>
                                </div>
                          </div>
                        </div>
                      </div>
                    </Card>
                  }) : <div>暂无消息</div>
                  }
                </div>; break;
                case 'comment':
                  return <div>
                     {
                     this.props.commentMessageList.length ?  this.props.commentMessageList.map((item,index)=>{
                         return (
                          <Card style={{ width: '100% ' }} key={index}>
                          <div className='message-box'>
                            <div className='avatar'>
                              <img src={require('../../../assets/images/1.jpg').default} alt="" />
                            </div>
                            <div className='message-item-right'>
                              <div className='message-item-head'>
                                <span>霸道</span>  <span>回复了你在文章</span>
                                <a href="">{item.title}</a>
                                <span>下的评论</span>
                              </div>
                              <div className='message-item-content'>
                                {item.content}
                              </div>
                              <div className='message-item-time'>
                                <div>
                                  <span>
                                  {item.createTime}
                                </span>
                                </div>
                                <div className='opreate-read'>
                                  <span className={item.isRead == 0 ?'one-read unread' : 'one-read'} onClick={()=>this.opreateRead(item,'one','comment',index)}>
                                  {item.isRead == 0 ? '标记已读' : '已读'}
                                </span>
                                <span className={Store.unReadMessageCount ? 'all-read unread' : 'all-read'} onClick={()=>this.opreateRead(item,'all','comment',index)}>
                                  全部已读
                                </span>
                                </div>
                                
                              </div>
                            </div>
                          </div>
                        </Card>
                         )
                       })
                       : <div>暂无消息</div>
                     }
                  </div>;break;
                  case 'praise':
                    return <div>
                    {
                    this.props.praiseMessageList.length ?  this.props.praiseMessageList.map((item,index)=>{
                        return (
                         <Card style={{ width: '100% ' }} key={index}>
                         <div className='message-box'>
                           <div className='avatar'>
                             <img src={require('../../../assets/images/1.jpg').default} alt="" />
                           </div>
                           <div className='message-item-right'>
                             <div className='message-item-head'>
                               <span>霸道</span>  <span>回复了你在文章</span>
                               <a href="">{item.title}</a>
                               <span>下的评论</span>
                             </div>
                             <div className='message-item-content'>
                               {item.content}
                             </div>
                             <div className='message-item-time'>
                               <div>
                                 <span>
                                 {item.createTime}
                               </span>
                               </div>
                               <div className='opreate-read'>
                                 <span className={item.isRead == 0 ?'one-read unread' : 'one-read'} onClick={()=>this.opreateRead(item,'one','comment',index)}>
                                 {item.isRead == 0 ? '标记已读' : '已读'}
                               </span>
                               <span className={Store.unReadMessageCount ? 'all-read unread' : 'all-read'} onClick={()=>this.opreateRead(item,'all','comment',index)}>
                                 全部已读
                               </span>
                               </div>
                               
                             </div>
                           </div>
                         </div>
                       </Card>
                        )
                      })
                      : <div>暂无消息</div>
                    }
                 </div>;break;
                    case 'attention':
                      return <div>
                      {
                      this.props.attentionMessageList.length ?  this.props.attentionMessageList.map((item,index)=>{
                          return (
                           <Card style={{ width: '100% ' }} key={index}>
                           <div className='message-box'>
                             <div className='avatar'>
                               <img src={require('../../../assets/images/1.jpg').default} alt="" />
                             </div>
                             <div className='message-item-right'>
                               <div className='message-item-head'>
                                 <span>霸道</span>  <span>回复了你在文章</span>
                                 <a href="">{item.title}</a>
                                 <span>下的评论</span>
                               </div>
                               <div className='message-item-content'>
                                 {item.content}
                               </div>
                               <div className='message-item-time'>
                                 <div>
                                   <span>
                                   {item.createTime}
                                 </span>
                                 </div>
                                 <div className='opreate-read'>
                                   <span className={item.isRead == 0 ?'one-read unread' : 'one-read'} onClick={()=>this.opreateRead(item,'one','comment',index)}>
                                   {item.isRead == 0 ? '标记已读' : '已读'}
                                 </span>
                                 <span className={Store.unReadMessageCount ? 'all-read unread' : 'all-read'} onClick={()=>this.opreateRead(item,'all','comment',index)}>
                                   全部已读
                                 </span>
                                 </div>
                                 
                               </div>
                             </div>
                           </div>
                         </Card>
                          )
                        })
                        : <div>暂无消息</div>
                      }
                   </div>;break;
                  default :
                  return <div>暂无消息</div>
            }

          })()
        }
      </div>
    )
  }
}
export default Index